<template>
	<view>
		<swiper class="screen-swiper round-dot" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000"
		 duration="500">
			<swiper-item @click="clickArticle(articleList[0].article_id)">
				<image mode="aspectFill" :src="articleList[0].cover_image"></image>
				<view class="cu-bar bg-shadeBottom" style="margin-top: -50px;">
					<text class="text-cut" style="font-size: 18px; margin: 0 auto;">{{articleList[0].article_title}}</text>
				</view>
			</swiper-item>
			<swiper-item @click="clickArticle(articleList[1].article_id)">
				<image mode="aspectFill" :src="articleList[1].cover_image"></image>
				<view class="cu-bar bg-shadeBottom" style="margin-top: -50px;">
					<text class="text-cut" style="font-size: 18px; margin: 0 auto;">{{articleList[1].article_title}}</text>
				</view>
			</swiper-item>
		</swiper>
		<view class="VerticalBox">
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" @click="tabSelect(item.category_id,index)"  :class="index==TabCur?'text-green cur':''" style="width: 70px;font-size: 14px;text-align: center;" v-for="(item,index) in categoryHeadList" :key="index">
				{{item.category_name}}
				</view>
			</scroll-view>

			<!--文章类卡片-->
			<view class="cu-card case" :class="isCard?'no-card':''" v-for="(item,index) in articleList" :key="index" @click="clickArticle(item.article_id)">
				<view class="cu-item shadow">
					<view class="image" style="height: 370rpx;">
						<!-- v-if="item.photoList" :src="item.photoList[0]" -->
						<image mode="aspectFit" :src="item.cover_image"></image>
						<view class="cu-tag bg-blue">{{item.category_name}}</view>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut" style="font-size: 18px; margin: 0 auto;">{{item.article_title}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" style="height: 40px;">
							<view class="content flex-sub">
								<view class="text-gray text-sm flex justify-between">
									<view class="text-gray text-sm" style="font-size: 26rpx;">
										<text style="display: inline;">
											<text style="margin-left: -60px;margin-right: 96px;">
												<text class="cuIcon-peoplefill margin-lr-xs"></text>{{item.nickname}}
											</text>
											<!-- <text class="cuIcon-attentionfill margin-lr-xs"></text> -->
											<text class="cuIcon-share margin-lr-xs"></text>{{item.share_count || 0}}
											<text class="cuIcon-favorfill margin-lr-xs"></text>{{item.collect_length || 0}}
											<text class="cuIcon-messagefill margin-lr-xs"></text>{{item.comment_length || 0}}
											<text class="cuIcon-appreciatefill margin-lr-xs"></text>{{item.like_length || 0}}
										</text>
										<!-- <text class="cuIcon-timefill margin-lr-xs"></text>{{item.add_time | formatTime}} -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<cu-footer></cu-footer>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import cuFooter from '../../components/footer/footer.vue';
	import APP from '../../App.vue';
	export default {
		components: {
			cuFooter
		},
		data() {
			return {
				category_id: 1,
				page: 1,
				page_size: 10,
				total: 0,
				articleList: [],
				categoryHeadList: [],
				TabCur: 0,  //分类栏开始
				scrollLeft: 0,
				itemByDate: [], // 分类下的博客
			}
		},
		created: function() {
			let _this = this;
			// Promise((resolve) => {
			// })
			uni.request({
				url: 'https://wzq0307.com/api/category/list',
				method: 'GET',
				data: {},
				success: (res) => {
					console.log(res);
					if (res.data.status == 0) {
						// _this.page = page;
						_this.categoryHeadList = res.data.data.categoryList;
						
						// _this.total = res.data.data.total;
					} else {
						// alert("获取文章列表失败，具体信息：" + res.data.message);
						wx.showModal({
						    title: '提示',
						    content: '出现错误了'+res.date.message,
						    success: function (res) {
						      if (res.confirm) {//这里是点击了确定以后
						        console.log('用户点击确定')
						      } else {//这里是点击了取消以后
						        console.log('用户点击取消')
						      }
						    }
						  })
					}
				},
				fail: function(e) {
					console.log(JSON.stringify(e));
				}

			})
			this.getArticleList(this.page,this.category_id);
		},
		onShow:function(){
			let _this=this
			this.getArticleList(this.page);
		},
		filters: {
			formatTime: function(time) { //
				let date = new Date(time * 1000);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				let hour = date.getHours().toString().padStart(2, '0');
				let minute = date.getMinutes().toString().padStart(2, '0');
				let second = date.getSeconds().toString().padStart(2, '0');
				return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			}
		},
		methods: {
			getArticleList: function(page,category_id) {
				let _this = this;
				uni.request({
					url: 'https://wzq0307.com/api/article/list',
					method: 'GET',
					data: {
						page: page,
						page_size: _this.page_size,
						category_id: category_id
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							_this.page = page;
							_this.articleList = res.data.data.articleList;
							_this.total = res.data.data.total;

						} else {
							alert("获取文章列表失败，具体信息：" + res.data.message);
						}

						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}

				})
			},
			tabSelect:function(categoryId,index) {
				this.TabCur = index
				this.scrollLeft = (index - 1) * 60
				console.log("开始切换",categoryId,index)
				this.itemByDate = []
				this.getArticleList(1,categoryId)
			},
			clickArticle: function(articleId) {
				uni.navigateTo({
					url: '../../pages/detail/detail?article_id=' + articleId
				})
			},
			// getCategoeyId:function(category_id){
			// 	let _this=this;
			// 	uni.request({
			// 		url: 'https://wzq0307.com/api/article/list',
			// 		method: 'GET',
			// 		data: {
			// 			page: _this.page,
			// 			page_size: _this.page_size,
			// 			category_id:category_id
			// 		},
			// 		success: (res) => {
			// 			console.log(res);
			// 			if (res.data.status == 0) {
			// 				_this.page = page;
			// 				_this.articleList = res.data.data.articleList;
			// 				_this.total = res.data.data.total;
				
			// 			} else {
			// 				alert("获取文章列表失败，具体信息：" + res.data.message);
			// 			}
				
			// 			// // 记录在本地
			// 			// uni.setStorageSync("token", datamd5); 
			// 			// uni.setStorageSync("time", data.time);
			// 		},
			// 		fail: function(e) {
			// 			console.log(JSON.stringify(e));
			// 		}
				
			// 	})
			}
		}
	
</script>

<style>
	.page {
		height: 100vh;
	}

	.loadStyle {
		margin-top: 20rpx;
		width: 100%;
		height: 60rpx;
		text-align: center;
		color: #bfbfbf;
	}
</style>
